<template>
  <el-select
    class="width_100"
    placeholder="请选择"
    v-model="selectValue"
    :disabled="disabled"
    filterable
    :clearable="clearable"
    @change="handleQueryChange"
    @visible-change="visibleChange"
  >
    <el-option
      v-for="item in selectOptions"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
    <VabElSelectLoading
      v-loading="loading"
      :page="page"
      :loading="false"
      :hasMore="hasMore"
      @loadMore="handleLoadMore"
    />
  </el-select>
</template>

<script setup lang="ts">

/**
 * @import
 */
import _ from "lodash";
import { ref } from "vue";
import { customer_list } from "~/src/api/dms/customer";
import { customer_optionsList } from '~/src/api/dms/customer';

/**
 * @props
 */
const props = defineProps({
  value: {
    type: String,
    default: ''
  },
  type: {
    type: Number,
    default: 1, //1 编码 2 名称
  },
  use_org_id: {
    type: String,
    default: ''
  },
  // 其他值
  otherValue: {
    type: String,
    default: ''
  },
  // 复合数据
  compositeValue: {
    type: String,
    default: ''
  },
  multiple: {
    type: Boolean,
    default: false
  },
  clearable: {
    type: Boolean,
    default: true
  },
  disabled: {
    type: Boolean,
    default: false
  }

})

/**
 * @var
 */

const proxy: any = getCurrentInstance()?.proxy

const page = ref(0);
const loading = ref(false);
const hasMore = ref(false);

const selectValue = ref<any>();
const selectOptions = ref<any[]>([]);

const emit = defineEmits(['LazyChange'])

/**
 * 加载更多数据
 */
const handleLoadMore = async (value: number) => {
  page.value = value
  loadDataList();
};

const visibleChange = (lay: boolean) => {
  if (!lay) return
  page.value = 1
  selectOptions.value = []
  if (lay) loadDataList()
}

/**
 * change
 */
const handleQueryChange = (value: any) => {
  const row = selectOptions.value.filter((item: any) => (props.type == 1 && item.name == value) || (props.type == 2 && item.number == value))
  emit('LazyChange', row[0])
}

/**
 * 加载数据列表
 */
const loadDataList = async () => {
  // if (!props.use_org_id) {
  //   selectOptions.value = []
  //   proxy.$Message('请先选择【使用组织】，再进行操作！', 'warning')
  //   return
  // }

  try {
    loading.value = true;

    // 参数
    let query = {
      is_group: 2,
      name: '',
      cust_type_id: '',
      primary_group: '',
    }

    // api
    const res = await customer_optionsList({ ...query })

    // 遍历获取  
    const list = res.data.map((item: any) => {
      if (props.type == 1) return { ...item, value: item.name, label: item.name }
      if (props.type == 2) return { ...item, value: item.number, label: item.number }
    }) || []

    if (page.value == 1) selectOptions.value = [];

    selectOptions.value.push(...list);
    loading.value = false
    hasMore.value = selectOptions.value.length < res.data.count

  } catch (err) {
    console.error(err);
  } finally {
    loading.value = false;
  }
};

</script>

<style lang="scss" scoped></style>

